import { useState, useEffect } from 'react';
import { useKeyPress } from './useKeyPress';

export default function Input() {
  const [input, setInput] = useState('');
  const pressQ = useKeyPress('q');
  const pressW = useKeyPress('w');
  const pressL = useKeyPress('l');

  useEffect(() => {
    console.log(`The user pressed Q!`);
  }, [pressQ]);

  useEffect(() => {
    console.log(`The user pressed W!`);
  }, [pressW]);

  useEffect(() => {
    console.log(`The user pressed L!`);
  }, [pressL]);

  return <input onChange={(e) => setInput(e.target.value)} value={input} placeholder="Type something..." />;
}
